<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>页面卷动动画</title>
        <link rel="stylesheet" href="style.css" />
    </head>
    <body>
        <h2>
            Superfast wireless
            <p>Hello 5G.</p>
        </h2>

        <div id="iphone">
            <div id="hardware"></div>
            <div id="ui">
                <img src="./images/top-bar.jpg" class="top-ui" alt="" />

                <ul>
                    <li>
                        <img src="./images/1.jpg" />
                    </li>
                    <li>
                        <img src="./images/2.jpg" />
                    </li>
                    <li>
                        <img src="./images/3.jpg" />
                    </li>
                    <li>
                        <img src="./images/4.jpg" />
                    </li>
                    <li>
                        <img src="./images/5.jpg" />
                    </li>
                    <li>
                        <img src="./images/6.jpg" />
                    </li>
                    <li>
                        <img src="./images/7.jpg" />
                    </li>
                </ul>
            </div>
        </div>
        <script>
            const rows = document.querySelectorAll("#ui ul li");
            const html = document.documentElement;
            document.addEventListener("scroll", (e) => {
                let scrolled =
                    html.scrollTop / (html.scrollHeight - html.clientHeight);

                let total = 1 / rows.length;

                for (let [index, row] of rows.entries()) {
                    let start = total * index;
                    let end = total * (index + 1);

                    let progress = (scrolled - start) / (end - start);
                    if (progress >= 1) progress = 1;
                    if (progress <= 0) progress = 0;

                    row.style.setProperty("--progress", progress);
                }
            });
        </script>
    </body>
</html>
